<template>
	<sys-container :label="'会员套餐购买详情'" showBack :withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<sliderHead style="width: 100%;"></sliderHead>
				<view class="packageList">
					<view class="packType">
						<view class="typeTit">
							中级消防监控
						</view>
						<view class="typeMain">
							<div class="pic" style="width:100%;height:300rpx;background:#abf" >
								<image :src="formData.img" mode="aspectFit" style="width:100%;height:100%"></image>
							</div>
							<!-- <image src="@/static/images/adver1.png" mode="widthFix"></image> -->
							<!-- <image src="" mode=""></image> -->
						</view>
					</view>
					
				</view>
				<view class="talkBox">
					<view class="talkBoxTit">
						用户评价
					</view>
					<view class="singleTalk" v-for="(item,index) in messageList" :key="index">
						<view class="talkAvator">
							<image :src="requestUrl+item.avatar" mode="aspectFit" style="width:100%;height:100%"></image>
						</view>
						<view class="talkMain">
							<view class="talkUser">
								<text>{{item.nickname}}</text>
								<view class="rate">
									<u-rate readonly color="#DA2627" void-color="transpanrent" :value="item.satisfied_score"/>
				
								</view>
							</view>
							<view class="message">
								{{item.comment}}
							</view>
							<view class="picList" v-if="item.pics&&item.pics.length>0">
									<u-grid>
										<u-grid-item span="8">
											<view class="singlePic">
												<!-- <image src="@/static/images/logo.png" mode="aspectFill" style="width:100%;height:100%"></image> -->
											</view>
										</u-grid-item>
										<u-grid-item span="8">
											<view class="singlePic">
												<!-- <image src="@/static/images/logo.png" mode="aspectFill" style="width:100%;height:100%"></image> -->
											</view>
										</u-grid-item>
										<u-grid-item span="8">
											<view class="singlePic">
												<!-- <image src="@/static/images/logo.png" mode="aspectFill" style="width:100%;height:100%"></image> -->
											</view>
										</u-grid-item>
										<u-grid-item span="8">
											<view class="singlePic">
												<!-- <image src="@/static/images/logo.png" mode="aspectFill" style="width:100%;height:100%"></image> -->
											</view>
										</u-grid-item>
									</u-grid>
							</view>
							<view class="date">
								{{item.add_time}}
							</view>
						</view>
					</view>
				</view>
			
				<view class="handleArea">
					<view class="numSelect">
						<text>购买时长</text>
						<view class="selectTime">
								<radio-group name="" @change="changeMemship">
									<label class="radio" v-for="(item,idx) in formData.sku" :key="idx">
										<radio :value="item.id" :checked="formData.memshipid==item.id" style="transform: scale(0.7);"/><text>{{item.day_title}}</text>
									</label>
									
								</radio-group>
								
						</view>
					</view>
					<view class="handleBtn">
						<text style="margin-right:53rpx;color:#DA2627"> <text style="font-size: 18rpx;text-decoration: line-through;"> <text>￥{{originPrice}}</text> </text> <text style="font-size: 22rpx;">￥</text><text style="font-size: 36rpx;font-weight: bold">{{formData.price*formData.selectNum}}</text></text>
						<u-button :custom-style="{height:'46rpx',borderRadius:'20rpx',background:'#DA2627',color:'#fff'}" @tap="toPay">立即购买</u-button>

					</view>
				</view>
			
			</view>
		</template>
	</sys-container>
</template>

<script>
	import {comment_list} from '@/globalApi/requestApi.js'
	import {getLastDay,getLastDayFromNow} from '@/util/index.js'
	import sliderHead from '@/components/sliderHead.vue'
	const app = getApp()
	export default {
		data() {
			return {
				formData:{
					selectNum:1,
					memshipid :'',
					price:0
				},
				// selectNum:1,
				messageList:[],
				requestUrl:app.globalData.requestUrl,
				originPrice:0,
				getLastDayFromNow,
				userInfo:{
					overdue_time:0,
					member_time:0,
				}
			}
		},
		components:{
			sliderHead
		},
		onLoad(options) {
			this.formData = {...this.formData,...JSON.parse(options.data),...this.selectNum}
			this.formData.memshipid = this.formData.sku[0].id
			this.formData.price = this.formData.sku[0].price
			this.originPrice = this.formData.sku[0].original_price
			// console.log(this.formData)
			this.getComment()
		},
		methods: {
			changeMemship(e){
				this.formData.memshipid = e.detail.value
				let obj = this.formData.sku.find(item=>{
					return item.id == e.detail.value
				})
				this.formData.price = obj.price
				this.originPrice = obj.original_price
			},
			toPay(){
				console.log(this.formData)
				uni.navigateTo({
					url:'../toPay/toPay?formData='+JSON.stringify(this.formData)
				})
			},
			getComment(){
				comment_list({id:this.formData.id}).then(res=>{
					if(res.code==200){
						this.messageList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		width:100%;
		height:100%;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #F6F6F6;
		
		.packageList{
			width:100%;
			margin-top:40rpx;
			.packType{
				width:100%;
				.typeTit{
					text-align: center;
					font-size: 40rpx;
					font-weight: bold;
					color: #222222;
					margin-bottom:10rpx;
				}
				.typeMain{
					width:100%;
					padding:0 40rpx;
					box-sizing: border-box;
					.pic{
						margin-bottom:30rpx;
					}
				}
			}
		}
		.talkBox{
			padding:0 40rpx;
			width:100%;
			box-sizing: border-box;
			.tablBoxTit{
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
			}
			.singleTalk{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 18rpx;
				background:#fff;
				padding:26rpx 21rpx;
				box-sizing: border-box;
				.talkAvator{
					width:100rpx;
					height:100rpx;
					border-radius: 50%;
					background:pink;
					margin-right:25rpx;
				}
				.talkMain{
					flex:1;
					.talkUser{
						width:100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						text{
							font-size: 22rpx;
							font-weight: 400;
							color: #555555;
						}
					}
					.message{
						margin-top:21rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
					}
					.picList{
						margin-top: 30rpx;
						.singlePic{
							width:150rpx;
							height:130rpx;
							border-radius: 8rpx;
							border:1rpx solid #ccc;
							margin-bottom: 30rpx;
						}
					}
					.date{
						font-size: 22rpx;
						font-weight: 400;
						color: #555555;
						text-align: right;
					}
				}
				
			}
			
		}
	
	
		.handleArea{
			position: fixed;
			width:100%;
			padding:37rpx 33rpx;
			box-sizing: border-box;
			bottom:0;
			
			background: #fff;
			.numSelect{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.handleBtn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
			}
		}
	}
</style>